<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全球疫情地图</title>
    <script src="./js/jquery.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/world.js"></script>
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <header>
        <!-- <div class="index">首页</div> -->
        <h1> 全球疫情地图 </h1>
        <div class="showTime" id="ST">时间</div>
        <script>
            var formaDate = function() {
                var d = new Date()
                var year = d.getFullYear(), //多变量赋值
                    month = d.getMonth() + 1, //month：从0开始
                    date = d.getDate(),
                    hour = d.getHours(),
                    minute = d.getMinutes(),
                    second = d.getSeconds();

                year = year < 10 ? '0' + year : year; //三元操作符
                month = month < 10 ? '0' + month : month;
                date = date < 10 ? '0' + date : date;
                hour = hour < 10 ? '0' + hour : hour;
                minute = minute < 10 ? '0' + minute : minute;
                second = second < 10 ? '0' + second : second;
                var a = year + '-' + month + '-' + date + ' ' + hour + ':' + minute + ':' + second;
                $('.showTime').html("<p>" + a + "</p>");
                window.addEventListener("resize", () => {
                    var w = document.documentElement.clientWidth;
                    var ST = document.getElementById('ST');
                    if (w < 720) {
                        ST.style.display = 'none'
                    } else {
                        ST.style.display = 'block'
                    }
                });
            }
            setInterval(formaDate, 1000) //设定定时器，循环运行;
        </script>
    </header>

    <section class="container mainbox">
        <div class="row">
            <!-- 左 -->
            <div class="col-lg-3 col-md-5 a">
                <div class="panel bl bar">
                    <h2>各洲累计确诊（海外）</h2>
                    <div class="chart"></div>
                    <div class="panelFooter"></div>
                </div>
                <div class="panel bl line">
                    <h2>全球疫情趋势（海外）</h2>
                    <div class="chart"></div>
                    <div class="panelFooter"></div>
                </div>
            </div>
            <!-- 中 -->
            <div class="col-lg-6 order-lg-1 b order-md-2">
                <!-- 上模块 -->
                <div class="no">
                    <div class="no-hd">
                        <ul>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
                    <div class="no-bd">
                        <ul>
                            <li>累计确诊人数</li>
                            <li>累计治愈人数</li>
                        </ul>
                    </div>
                </div>
                <!-- 地图模块 -->
                <div class="map">
                    <div class="chart" id="viewDiv"></div>
                    <div class="panelFooter"></div>
                </div>
            </div>
            <!-- 右 -->
            <div class="col-lg-3 order-lg-2 c col-md-7 order-md-1">
                <div class="panel bl bar1">
                    <h2>世界疫情确诊情况前十五</h2>
                    <div class="chart" id="fifty"></div>
                    <div class="panelFooter"></div>
                </div>
            </div>
            <div class="data">数据来源于腾讯，每小时更新一次</div>
        </div>
    </section>

    <script src="./js/echarts.min.js"></script>
    <script src="./js/world.js"></script>
    <script src="./js/index.js"></script>

    <script>
        let res1, res2
        $.ajax({
                url: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
                type: 'get',
                // data: {},
                dataType: 'jsonp',
            })
            .then((data) => {
                var res = data.data || "";
                // console.log(JSON.parse(res).chinaTotal.heal)
                res1 = JSON.parse(res).chinaTotal.confirm;
                res2 = JSON.parse(res).chinaTotal.heal;
                return $.ajax({
                    url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=FAutoGlobalStatis,FAutoContinentStatis,FAutoGlobalDailyList,FAutoCountryConfirmAdd',
                    type: 'get',
                    // data: {},
                    dataType: 'json',
                })
            })
            .then((data) => {
                // console.log(data)
                let sum = data.data.FAutoGlobalStatis.confirm + res1
                let cureSum = data.data.FAutoGlobalStatis.heal + res2
                $(".no-hd li:first").text(sum)
                $(".no-hd li:nth-child(2)").text(cureSum)
            })
    </script>
</body>

</html>